<template>
  <div :class="['device_card',inElectron?'card_style_electron':'']"  @click="nav">
    <div class="title">{{title}}</div>
    <div class="pic_box">
      <img class="device_pic_img" :src="pic " />
    </div>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref,watch } from 'vue';
import { useHidStore } from "../stores/useHidStore.js";
import { ryWiredSendFeatureReport,ry24SendFeatureReport } from "../composables/ryHidService";
import { hfdSend} from "../composables/hfdHidService";
import { getBeiyinUuid } from '../composables/BeiyinHidService'
import { connectDeviceHID } from '../composables/DakaiHidService/KeybaordDevice.js';

import { useI18n } from 'vue-i18n';
import { inElectron } from '../utils/tools'
const hidStore = useHidStore();
const { t } = useI18n();

const props = defineProps({
  item2: {
    type: Object,
    default: ()=>{},
  },
  protocol:{
    type: String,
    default: 'default',
  }
})
const protocolList = ['ry_wired','ry-receiver','hfd-receiver','beiyin_uuid','dakai']

const title = ref('')
const pic = ref('')
const pid = ref('')
const vid = ref('')
const productName = ref('')

const currentDeviceData = ref(null)

const getCustomInfo = (currentDevice) => {
  const device = hidStore.hidList?.find(
    (item) =>
      (item.pid == currentDevice.pid && item.vid == currentDevice.vid && item.productName == currentDevice.productName) ||
      (item.pid == currentDevice.pid && item.vid == currentDevice.vid && item.noUseProductName)
  );
  return device;
};

// 容圆 有线
const getTrueItem = async(item)=>{
  const JsonItem = getCustomInfo(item);
  const trueItem = await ryWiredSendFeatureReport(item.devices[0],JsonItem)
  return trueItem
}

// hfd 接收器
const getHfdTrueItem = async(item)=>{
  const JsonItem = getCustomInfo(item);
  const trueItem = await hfdSend(item.devices[0],JsonItem)
  return trueItem
}

// 容圆 接收器
const getRyTrueItem = async(item)=>{
  const JsonItem = getCustomInfo(item);
  const trueItem = await ry24SendFeatureReport(item.devices[0],JsonItem)
  return trueItem
}

// 贝盈uuid
const getBeiyinUuidTrueItem = async(item)=>{
  const JsonItem = getCustomInfo(item);
  const trueItem = await getBeiyinUuid(item.devices[0],JsonItem)
  return trueItem
}

// 大开(有线and接收器)
const getDakaiTrueItem = async(item)=>{
  const JsonItem = getCustomInfo(item);
  const deviceComm = await connectDeviceHID();
  const deviceInfo = await deviceComm.getDeviceInfoWithRetry();
  console.log("大开设备信息:", deviceInfo);
  const drvSN = deviceInfo.drvSN
  const drvSNHex = '0x' + parseInt(drvSN).toString(16).toUpperCase()
  const deviceItem = JsonItem.deviceIds.find((item) => item.id == drvSNHex)
  console.log("大开设备JSON:", deviceItem);
  return deviceItem
}


watch(props.type,async()=>{
    const device = hidStore.hidList?.find((item) =>item.pid == props.item2.pid && item.vid == props.item2.vid && item.productName == props.item2.productName);
    console.log("card device==:", device);

    title.value = device?.titleName
    pic.value = device?.productPic

    pid.value = device?.pid
    vid.value = device?.vid
    productName.value = device?.productName

    if(props.protocol == 'default'){
        currentDeviceData.value = device
    }
    if(props.protocol == 'ry_wired'){
        const trueItem = await getTrueItem(props.item2)
        setInfo(trueItem,device)
    }
    if(props.protocol == 'hfd-receiver'){
        console.log('使用hfd-receiver：',props.item2)
        const trueItem = await getHfdTrueItem(props.item2)
        console.log('使用hfd-receiver trueItem:',trueItem)
        setInfo(trueItem,device)
    }
    if(props.protocol == 'ry-receiver'){
        const trueItem = await getRyTrueItem(props.item2)
        setInfo(trueItem,device)
    }
    if(props.protocol == 'beiyin_uuid'){
        const trueItem = await getBeiyinUuidTrueItem(props.item2)
        setInfo(trueItem,device)
    }
    if(props.protocol == 'dakai'){
        const trueItem = await getDakaiTrueItem(props.item2)
        setInfo(trueItem,device)
    }
},{immediate:true})

// 若休眠中则使用外层title ,pic
const setInfo = (trueItem)=>{
  if(trueItem){
    title.value = trueItem?.titleName
    pic.value = trueItem?.productPic
    currentDeviceData.value = trueItem
  }
}

const sendToApp = (data) => {
  if (window.require) {
      const { ipcRenderer } = window.require('electron');
      ipcRenderer.sendToHost('webview-data', data);
  }
}
const nav = ()=>{
  console.log('nav====',currentDeviceData.value)
  if(!currentDeviceData.value){
    message.warning(t('device.activateDevice'));
    return
  }
  if(props.protocol == 'default'){
    const pid10 = parseInt(currentDeviceData.value.pid, 16);
    const vid10 = parseInt(currentDeviceData.value.vid, 16);

    const jsonUrl = currentDeviceData.value.url
    const hasSearchParams = jsonUrl?.includes('?');
    
    const url = hasSearchParams?jsonUrl:`${jsonUrl}?productId=${pid10}&vendorId=${vid10}&productName=${currentDeviceData.value.productName}`
    window.open(url, "_blank");
    sendToApp(url)
    return
  }
  if(protocolList.includes(props.protocol)){
    const pid10 = parseInt(pid.value, 16);
    const vid10 = parseInt(vid.value, 16);

    const jsonUrl = currentDeviceData.value.url
    const hasSearchParams = jsonUrl?.includes('?');
    
    const url = hasSearchParams? jsonUrl : `${jsonUrl}?productId=${pid10}&vendorId=${vid10}&productName=${productName.value}`;
    window.open(url, "_blank");
    sendToApp(url)
    return
  }
}

if(inElectron){
  document.body.style.backgroundColor = '#f2f2f2'
}
</script>

<style scoped>
.device_card {
  flex-shrink: 0;
  width: 280px;
  background-color: #242627;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 26px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
}
.card_style_electron{
  background-color: #fff;
  color: #000;
}
.device_card:hover {
  border: 1px solid rgba(255, 80, 25, 1);
}
.title {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}
.pic_box {
  width: 90%;
  height: 200px;
  display: flex;
  justify-content: center;
}
.device_pic_img {
  height: 100%;
  object-fit: contain;
}
</style>
